<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% String context = request.getContextPath(); %>
<html>
<head>
  <title>查看流程图</title>
  <link rel="stylesheet" type="text/css" href="<%=context %>/Source/lib/ligerUI/skins/ligerui-icons.css" />
  <link rel="stylesheet" type="text/css" href="<%=context %>/Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" />
  <link rel="stylesheet" type="text/css" href="<%=context %>/gooflow/GooFlow/codebase/GooFlow2.css"/>
  <link rel="stylesheet" type="text/css" href="<%=context %>/gooflow/default.css"/>
</head>
<body>
  <div class="container" style="margin:20px;">
    <div id="demo" style="margin:0 auto;" oncontextmenu="return false;">

    </div>
    <div id="lock" style="position:relative;top:-495px;left:160px;width:972px;height:473px;"></div>
  </div>

</body>
<script src="<%=context %>/gooflow/jquery.min.js"></script>
<script src="<%=context %>/Source/lib/ligerUI/js/ligerui.all.js"></script>
<script src="<%=context %>/gooflow/GooFlow/data.js"></script>
<script src="<%=context %>/gooflow/GooFunc.js"></script>
<script src="<%=context %>/gooflow/json2.js"></script>
<script src="<%=context %>/gooflow/GooFlow/codebase/GooFlow.js"></script>
<script>
var path = '<%=context %>';

    $(function(){
      $("#daiLog").width($(window).width()-2);
      $("#daiLog").height($(window).height()-2);
      $("#demo_node_2").css("background","red");
      demo = $.createGooFlow($("#demo"), property);
      /*绑定左侧节点的提示文字*/

     if(json != "" && json != null){
        demo.loadData(json);
      }

      $("body").click(function(){
        $("#rightMenu").remove();
      });
      /*节点的右键*/
      $("#demo").contextmenu(function(event){
        nodeId=null;
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var $obj = $(obj);
        $("#rightMenu").remove();
        var x = event.pageX;
        var y = event.pageY;
        var menu = "<ul id='rightMenu' style='list-style:none;border:1px solid #ccc;"+
                "font-size:12px;text-align:center;line-height: 20px;width:80px;"+
                "position:absolute;background:#BEE1F6;z-index:100;top:"+y+"px;left:"+x+"px;"+
                "border-radius:3px'>"+
                "<li id='property' onclick='pptFun()'style='cursor:pointer'>属  性</li>"+
                "</ul>";
        if($obj.is("i")){
          nodeId = $obj.parent().parent().parent().parent().parent().attr('id');
          $("body").append(menu);
        }else if($obj.is('td')){
          nodeId = $obj.parent().parent().parent().parent().attr('id');
          $("body").append(menu);
        }
      });


      /*保存流程图*/
      $("#save").click(function(){

        newJson = demo.exportData(properties);
        newJson["title"] = '${processName}';
        /*判断： 把没有值的属性删除*/
        for(var k in newJson){
          if(newJson[k]==undefined || newJson[k] == "" || newJson[k] == null ||newJson[k] == {} ||  newJson[k] == {}){
            delete newJson[k];
          }
        }
        var newJsonStr = JSON.stringify(newJson);
        $.ajax({
          url:'${_ctx}/flow/process/set/json?isNewVersion=0',
          type:'post',
          dataType:'json',
          data:{processId:'${processId}',json:newJsonStr.replace(/\\n/g,"")},
          success:function(responseText){
            BAP.closeWaitting();
            if (!responseText.isError) {
              BAP.showSuccess("保存成功！");
            } else {
              BAP.showError('保存失败！');
            }
          },
          error: function () {
            BAP.closeWaitting();
            BAP.showError('系统错误！');
          }
        });


      });

      /*另存流程图为新版本*/
      $("#newSave").click(function(){
        save('1','另存为新版本');
      });

      /*清除*/
      $("#clear").click(function(){
        demo.destrory();
        demo = $.createGooFlow($('#demo'), property);
        demo.setNodeRemarks(remark);
        json = null;
        sessionStorage.clear();
        mark == 0;
      });
    });
    var mark = 0;
    var viewPageId;
    var versionNote;
    var newJson;
    var properties={};
    var json =null;
    if('${processJson}'!=""){
      json =JSON.parse('${processJson}');
      properties = json["properties"];
    }
    /*保存方法*/
    function save(isNewVersion,title){
      $.ligerDialog.open({title: title, width: 330,height:350, allowClose: false, url: '${_ctx}/flow/process/flowSaveDialog?processId=${processId}&isNewVersion='+isNewVersion,
        buttons: [
          { text: '确定', onclick: function (item, dialog) {
            var msg = dialog.frame.getMsg();
            viewPageId = msg.viewPageId;
            versionNote = msg.versionNote;
            newJson = demo.exportData(properties);
            newJson["title"] = '${processName}';
            /*判断： 把没有值的属性删除*/
            for(var k in newJson){
              if(JSON.stringify(newJson[k])==undefined || JSON.stringify(newJson[k]) == "" || JSON.stringify(newJson[k]) == null ||JSON.stringify(newJson[k]) == "{}"){
                delete newJson[k];
              }
            }
            var newJsonStr = JSON.stringify(newJson);
            if(viewPageId==""){
              BAP.showWarn("请选择显示页面！");
              return;
            }
            if(versionNote == ""){
              BAP.showWarn("请填写版本说明！");
              return;
            }
            $.ajax({
              url:'${_ctx}/flow/process/set/json?isNewVersion='+isNewVersion,
              type:'post',
              dataType:'json',
              data:{processId:'${processId}',versionNote:versionNote,viewPageId:viewPageId,json:newJsonStr.replace(/\\n/g,"")},
              success:function(responseText){
                BAP.closeWaitting();
                if (!responseText.isError) {
                  BAP.showSuccess("保存成功！");
                  if(mark == 0){
                    mark = 1;
                  }
                } else {
                  BAP.showError('保存失败！');
                }
              },
              error: function () {
                BAP.closeWaitting();
                BAP.showError('系统错误！');
              }
            });
            dialog.close();
          }
          },
          { text: '关闭', onclick: function (item, dialog) {
            dialog.close();
          }
          }
        ]
      });
    }
  </script>
  <script>
    var property = {
      width: 1000,
      height: 500,
      toolBtns: ["start round", "end round", "userTask", "multiTaskOr","examine"],//   , "complex mix , "chat", "state", "plug", "join", "fork""
      haveHead: false,
      headBtns: ["new", "open", "save", "undo", "redo", "reload"], //如果haveHead=true，则定义HEAD区的按钮
      haveTool: false,
      haveGroup: true,
      useOperStack: true
    };
    var remark = {
      cursor: "选择指针",
      direct: "结点连线",
      start: "开始节点",
      end: "结束结点",
      userTask: "单任务结点",
      multiTaskOr: "多任务节点",
      examine:"审批节点",
      group: "组织划分框编辑开关"
    };
    var demo;
    var nodeId;//当前结点的key值

    /**
     * 右键属性事件
     **/

    function pptFun(){
      $("#daiLog").show();
      if(json !=null){
        properties= json['properties'];
        sessionStorage.setItem("properties",JSON.stringify(properties));
      }
      //获取所有的节点
      var nodeStr =demo.$nodeData;
      sessionStorage.setItem("nodeStr",JSON.stringify(nodeStr));
      var currentNodeName = nodeStr[nodeId].name;
      $("#rightMenu").remove();
      //单任务节点
      if(nodeStr[nodeId].type == "userTask"){
        sessionStorage.setItem("userTaskJson",JSON.stringify(properties[nodeId]));
        $.ligerDialog.open({title: currentNodeName, width: 725,height:600, allowClose: false, url: path+'/flow/userTaskNode?currentNodeId='+nodeId+'&processId=${processId}',
          buttons: [
            { text: '确定', onclick: function (item, dialog) {
              var nodeJson = dialog.frame.createJson();
              if(dialog.frame.fkId() ==""){
                BAP.showWarn("流程执行人不能为空");
                return;
              }
              if(dialog.frame.isNoticesNull){
                properties[nodeId] = nodeJson;
                var nextNodeIds = dialog.frame.nextNodeId();
                dialog.close();
                reLoadFolw(nextNodeIds);
              }
            }
            },
            { text: '关闭', onclick: function (item, dialog) {
              dialog.close();
            }
            }
          ]
        });
      //审批节点
      }else if(nodeStr[nodeId].type == "examine"){
        sessionStorage.setItem("examineJson",JSON.stringify(properties[nodeId]));
        $.ligerDialog.open({title: currentNodeName, width: 635,height:550, allowClose: false, url: path+'/flow/examineNode?currentNodeId='+nodeId+'&processId=${processId}',
          buttons: [
            { text: '确定', onclick: function (item, dialog) {
              var nodeJson = dialog.frame.createJson();
              if(dialog.frame.fkId() ==""){
                BAP.showWarn("流程执行人不能为空");
                return;
              }
              if(dialog.frame.isNoticesNull){
                properties[nodeId] = nodeJson;
                var nextNodeId = dialog.frame.nextNodeId();
                dialog.close();
                reLoadFolw(nextNodeId);
              }
            }
            },
            { text: '关闭', onclick: function (item, dialog) {
              dialog.close();
            }
            }
          ]
        });
      //多任务节点
      }else if(nodeStr[nodeId].type == "multiTaskOr"){
        if(properties[nodeId] != undefined){
          sessionStorage.setItem("childNode",JSON.stringify(properties[nodeId].tasks));
        }
        $.ligerDialog.open({title: currentNodeName, width: 635,height:550, allowClose: false, url: path+'/flow/multiTaskOr?currentNodeId='+nodeId+'&processId=${processId}',
          buttons: [
            { text: '确定', onclick: function (item, dialog) {
              var nodeJson = dialog.frame.createJson();
              properties[nodeId] = nodeJson;
              var nextNodes = dialog.frame.getAllChildNodeId();
              dialog.close();
              reLoadFolw(nextNodes);

            }
            },
            { text: '关闭', onclick: function (item, dialog) {
              dialog.close();
            }
            }
          ]
        });

        /*开始节点*/
      }else if(nodeStr[nodeId].type == "start round"){
        $.ligerDialog.open({title: currentNodeName, width: 320,height:170, allowClose: false, url: path+'/flow/startNode?currentNodeId='+nodeId,
          buttons: [
            { text: '确定', onclick: function (item, dialog) {
              var nextNodeIds = dialog.frame.nextNodeId();
              dialog.close();
              reLoadFolw(nextNodeIds);
            }
            },
            { text: '关闭', onclick: function (item, dialog) {
              dialog.close();
            }
            }
          ]
        });
      }
      json = demo.exportData(properties);
    }

    function reLoadFolw(nextNodeIds){
      var newJson = demo.exportData(properties);
      var i=0;
      for(var lineKey in newJson.lines){
        if(lineKey!=""){
          i+=1;
        }
      }
      for(var j=0;j<nextNodeIds.length;j++){
        if(nextNodeIds[j]!=""){
          var line = {type:"sl",from:nodeId,to:nextNodeIds[j],name:"",alt:true};
          newJson.lines["demo_line_"+(i+1)+"_"+(j+1)]=line;
        }
      }

      demo.destrory();
      demo = $.createGooFlow($("#demo"), property);
      /*绑定左侧节点的提示文字*/
      demo.setNodeRemarks(remark);
      demo.loadData(newJson);
    }
    $(function(){
      $("#"+'${nodeCode}').css({"background":"LightGreen"})
    })
  </script>
</html>
